Tables

Simple Table

The default table styles are built on the table family of elements. This particular example shows a thead element with four rows of content followed by a tbody with several rows of elements. Additionally when a caption is used with the table, a heading style is applied to the caption element to postion it above the table.

The default vertical margin of tables is 4rem. To adjust the margins with utility classes, apply the cmp-table component class to the table element.

In order to be responsive tables should be nested inside a div with the class util-scrollable-content.

View

Table Caption
Phase Weeks Learner Role Instructor Role
1 1 to 2 Newcomer Social Negotiator
2 3 to 4 Cooperator Structural Engineer
3 5 to 6 Collaborator Facilitator
4 Beyond Initiator/Partner Challenger/Partner

HTML

<div class="util-scrollable-content">
  <table>
    <caption>Table Caption</caption>
    <thead>
      <tr>
        <th>Phase</th>
        <th>Weeks</th>
        <th>Learner Role</th>
        <th>Instructor Role</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>1 to 2</td>
        <td>Newcomer</td>
        <td>Social Negotiator</td>
      </tr>
      <tr>
        <td>2</td>
        <td>3 to 4</td>
        <td>Cooperator</td>
        <td>Structural Engineer</td>
      </tr>
      <tr>
        <td>3</td>
        <td>5 to 6</td>
        <td>Collaborator</td>
        <td>Facilitator</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Beyond</td>
        <td>Initiator/Partner</td>
        <td>Challenger/Partner</td>
      </tr>
    </tbody>
  </table>
</div>

Sortable Table

The sortable table uses the simple table styles but sortable rows contain the cmp-sortable cell component.

If a column is sortable then the default down arrow is visible without the active state. The button text (for assistive technology) should be Sort Ascending.

Clicking an arrow should do the following:

  1. The first time an unactive sort icon is clicked the contents of the column will alphabetized A-Z, the arrow will point down, the arrow will have an active state. The button text should be Sort Descending because that is the next action.
  2. The second time an arrow is clicked the contents of the column will be alphabetized Z-A, the arrow will point up, the arrow will keep the active state. The button text should be Reset because that is the next action.
  3. The third time an arrow is clicked the contents of the column will reset to their default order, the arrow will point down, the arrow will lose the active state.
  4. Only on column can be sorted at a time. If a new arrow is clicked then the above steps are reset for the previously sorted column and we start over for the new column.

Note: Sortable tables in the pattern library and demo pages do not trigger a sort. All sorting logic will be implemented server side during integration.

View

Course Course Title Instructor Areas Fulfilled Credit Hours Seats Taken
HDFS 3930E 21st-Century Intimate Relation Jennifer Gonyea 3 27 / 65
EPSY 4240E Abnormal Child Psychology A Lease 3 3 / 25
PSYC 3230E Abnormal Psychology Trina Cyterski 2 26 / 35
ECHD 2050E Academic and Career Planning Ana Hill 2 25 / 25

HTML

<div class="util-scrollable-content">
  <table>
    <thead>
      <tr>
        <th scope="col">
          Course
        </th>
        <th scope="col">
          <span class="cmp-sortable-cell">
            Course Title
            <button class="cmp-sortable-cell__icon cmp-sortable-cell__icon--down cmp-sortable-cell__icon--active">
              Sort Descending
            </button>
          </span>
        </th>
        <th scope="col">
          Instructor
        </th>
        <th scope="col">
          Areas Fulfilled
        </th>
        <th scope="col">
          <span class="cmp-sortable-cell">
            Credit Hours
            <button class="cmp-sortable-cell__icon cmp-sortable-cell__icon--down">
              Sort Ascending
            </button>
          </span>
        </th>
        <th scope="col">
          Seats Taken
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">HDFS 3930E</th>
        <td>21st-Century Intimate Relation</td>
        <td>Jennifer Gonyea</td>
        <td></td>
        <td>3</td>
        <td>27 / 65</td>
      </tr>
      <tr>
        <th scope="row">EPSY 4240E</th>
        <td>Abnormal Child Psychology</td>
        <td>A Lease</td>
        <td></td>
        <td>3</td>
        <td>3 / 25</td>
      </tr>
      <tr>
        <th scope="row">PSYC 3230E</th>
        <td>Abnormal Psychology</td>
        <td>Trina Cyterski</td>
        <td></td>
        <td>2</td>
        <td>26 / 35</td>
      </tr>
      <tr>
        <th scope="row">ECHD 2050E</th>
        <td>Academic and Career Planning</td>
        <td>Ana Hill</td>
        <td></td>
        <td>2</td>
        <td>25 / 25</td>
      </tr>
    </tbody>
  </table>
</div>